<div class="page-group">
    <div class="page" data-page="book_kind">
    <header class="bar bar-nav">
        <a href="javascript:return document.referrer;" onclick="javascript:history.go(-1);" class="icon" style="width: 40%">
            <img src="__PUBLIC__/img/iconfont_back@2x.png" class="back_img">
        </a>
    </header>
    <div class="content">
        <div class="recive_name">
            <input type="text" id="a_name" placeholder="收货人姓名" value="{$d.name}">
        </div>
        <div class="tel_num">
            <input type="text" id="a_phone" placeholder="手机号码" value="{$d.phone}" pattern="[0-9]{11}" onkeyup="checkphone()">
        </div>
        <div class="pro_city_zone">
            <input type="text" id='a_city' placeholder="省、市、区" <if condition="$d['province'] neq NULL"> value="{$d.province} {$d.city} {$d.district}" </if> >
        </div>
        <div class="address_detail">
            <input type="text" id="a_address" placeholder="详细地址"  value="{$d.address}"  >
        </div>
    </div>
    <nav class="bar bar-tab old_bar">
            <a class="tab-item external active" href="#">
                <input class="save_address" type="button" value="保存" onclick="save_address()">
            </a>
    </nav>
</div>
</div>
<script type='text/javascript' src='__PUBLIC__/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='__PUBLIC__/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='__PUBLIC__/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="__PUBLIC__/js/sm-city-picker-define.min.js" charset="utf-8"></script>
<script>
    checkphone();
    $("#a_city").cityPicker({
        toolbarTemplate: '<header class="bar bar-nav">\
    <button class="button button-link pull-right close-picker">确定</button>\
    <h1 class="title">选择收货地址</h1>\
    </header>'
    });
    //自动检查号码并格式化
    function checkphone(){
        var $v=$("#a_phone").val();
        $v=$v.replace(/\s+/g,"");
        var $len=$v.length;
        var $str=$v.substr(0,11);
        var $str_1=$str.substr(0,3);
        var $str_2=$str.substr(3,4);
        var $str_3=$str.substr(7,4);
        if($len<4){
            $("#a_phone").val($str_1);
        }
        if($len>3 && $len <8){
            $("#a_phone").val($str_1+" "+$str_2);
        }
        if($len>7){
            $("#a_phone").val($str_1+" "+$str_2+" "+$str_3);
        }
    }

    function save_address(){
        var $name=$("#a_name").val();
        var $phone=$("#a_phone").val().replace(/\s+/g,"");
        var $city=$("#a_city").val();
        var $address=$("#a_address").val();
        if(Trim($name)==""){
            $.alert("请填写收货人姓名");
            return;
        }
        if(Trim($phone)==""){
            $.alert("请填写手机号码");
            return;
        }
        if(Trim($city)==""){
            $.alert("请选择城市");
            return;
        }
        if(Trim($address)==""){
            $.alert("请填写详细地址");
            return;
        }
        var $phonelen=Trim($phone).length;
        if($phonelen>11 || $phonelen<11){
            $.alert("请填写正确的手机号码");
            return;
        }
        $.ajax({
            type: "GET",
            url: "{:U('User/saveaddress')}",
            data: {name:$name,phone:$phone,city:$city,address:$address},
            dataType: "json",
            success: function(data){
                if(data==1){
                    alert("保存成功");
//                    history.go(-2);
//                    location.assign(location);
                    window.location.href=document.referrer;
                    //window.location.href="{:U('User/index')}";
                }else{
                    alert("保存失败");
                }
            }
        });
    }

</script>
<style>
.picker-modal{width:100%;}
.picker-modal .picker-modal-inner{width:100%;}
.picker-modal .picker-modal-inner .picker-items-col{width:33%;}
.picker-modal .picker-modal-inner .picker-items-col .picker-items-col-wrapper{width:100%;}
.picker-modal .picker-modal-inner .picker-items-col .picker-items-col-wrapper .picker-items{width:100%;}
.picker-modal .picker-modal-inner .picker-items-col .picker-items-col-wrapper .picker-items .picker-item{width:100%;}
</style>